<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<link rel="stylesheet" href="../../resources/css/userarticle.css" />
		<link rel="stylesheet" href="../../resources/layui/css/layui.css" />
		<script type="text/javascript" src="../../resources/js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="../../resources/layui/layui.all.js"></script>

	</head>

	<body>
		<div class="content">
			<ul class="layui-timeline" id="userArticle" >
			</ul>
			<div id="page" >
			</div>
		</div >
		<script>
			$('.edit').on('click', function() {
				parent.layer.open({
					type: 2,
					title: '编辑文章',
					shadeClose: true, //点击遮罩关闭层
					area: ['1000px', '750px'],
					content: '../user/articleedit.jsp'
				});
			});
		</script>
	</body>
	<script>
		var userid = ${sessionScope.userId};
		$.ajax({
			type: "post",
			url: "/article/queryAllArticleById.action",
			data: {
				"pageCount": 1,
				"pageSize": 4,
				"users.userId": userid
			},
			dataType: 'Json',
			success: function(result) {
				var currpage = result.totalPage;
				var pagecount = result.pageSize;
				layui.use("laypage", function() {
					var laypage = layui.laypage;
					laypage.render({
						elem: 'page',
						count: currpage * pagecount, //总页数
						limit: 4,
						jump: function(obj, first) {
							console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
							console.log(obj.limit); //得到每页显示的条数
							var pageIndex = obj.curr;
							var pageLimit = obj.limit;
							//首次不执行
							if(!first) {
								$("#userArticle").html("");
								toPage(pageIndex, pageLimit);
							}
						}
					});
				});
				$.each(result.row, function(index, item) {
					var releaseTime = new Date(item.releaseTime);
					var year = releaseTime.getFullYear();
					var day = releaseTime.getDate();
					var month = +releaseTime.getMonth() + 1;
					var time = month + "月" + day + "日";
					var articleId = item.articleId;
					var lastUpdateTime = new Date(item.lastUpdateTime);
					var hour = lastUpdateTime.getHours();
					var minute = lastUpdateTime.getMinutes();
					var time1 = hour + ":" + minute;
					var a = "<li class='layui-timeline-item'> <i class='layui-icon layui-timeline-axis'>&#xe63f;</i>";
					a += "<h3 class='layui-timeline-title'>" + item.releaseTime + "</h3>";
					a += "<div class='main'><div class='left_img'><img src=" + item.articleImage + " width='74' height='74' />";
					a += "</div><div class='right_content'><div class='r_title'><a target='_blank' href='/pages/article/articledetails.jsp?articleId=" + articleId + "'><h4>" + item.articleTitle + "</h4></a></div>"
					a += "<div class='r_other'><div class='big_type'><a href='javascript:(0)' target='_blank'>前端开发</a></div>";
					a += "<span class='small_type layui-icon layui-icon-note'><span>JAVA</span></span>";
					a += "<span class='nummber layui-icon layui-icon-log'><span>" + item.readNumber + "</span></span>";
					a += "<span class='time layui-icon layui-icon-date''><span>" + time1 + "</span></span></div>";
					a += "<div class='edit layui-btn layui-btn-normal'>编辑</div></div></div></div></li>"
					$("#userArticle").append(a);
				});
			}
		})
	</script>
	<script>
		function toPage(pageCount, pageSize) {
			var loading = layer.msg('加载中！请稍后....', {
				icon: 16,
				shade: 0.01
			});
			$.ajax({
					type: "post",
					url: "/article/queryAllArticleById.action",
					data: {
						"pageCount": pageCount,
						"pageSize": pageSize,
						"users.userId": userid
					},
					dataType: "json",
					success: function(result) {
						$.each(result.row, function(index, item) {
							var releaseTime = new Date(item.releaseTime);
							var year = releaseTime.getFullYear();
							var day = releaseTime.getDate();
							var month = +releaseTime.getMonth() + 1;
							var time = month + "月" + day + "日";
							var articleId = item.articleId;
							var lastUpdateTime = new Date(item.lastUpdateTime);
							var hour = lastUpdateTime.getHours();
							var minute = lastUpdateTime.getMinutes();
							var time1 = hour + ":" + minute;
							var a = "<li class='layui-timeline-item'> <i class='layui-icon layui-timeline-axis'>&#xe63f;</i>";
							a += "<h3 class='layui-timeline-title'>" + item.releaseTime + "</h3>";
							a += "<div class='main'><div class='left_img'><img src=" + item.articleImage + " width='74' height='74' />";
							a += "</div><div class='right_content'><div class='r_title'><a target='_blank' href='/pages/article/articledetails.jsp?articleId=" + articleId + "'><h4>" + item.articleTitle + "</h4></a></div>"
							a += "<div class='r_other'><div class='big_type'><a href='javascript:(0)' target='_blank'>前端开发</a></div>";
							a += "<span class='small_type layui-icon layui-icon-note'><span>JAVA</span></span>";
							a += "<span class='nummber layui-icon layui-icon-log'><span>" + item.readNumber + "</span></span>";
							a += "<span class='time layui-icon layui-icon-date''><span>" + time1 + "</span></span></div>";
							a += "<div class='edit layui-btn layui-btn-normal'>编辑</div></div></div></div></li>"
							$("#userArticle").append(a);
						});
						layer.msg('加载成功！！', {
							icon: 1,
							time: 1000,
						});
					}
				});
		}
	</script>

</html>